<template>
<div class="edit-main">
    <el-card class="edit">
        <div slot="header" v-if="brand.id" class="header">编辑商品</div>
        <div slot="header" v-else class="header">新增商品</div>
        <div>
            <!-- 内容区 -->
            <el-form ref="form" :model="brand" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="品牌名称">
                            <el-input v-model="brand.name" placeholder="请输入名字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="评论数量" label-width="120px">
                            <el-input v-model="brand.productCommentCount" placeholder="请输入产品评论数量"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="产品数量">
                            <el-input v-model="brand.productCount" placeholder="请输入品牌数量"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="16">
                        <el-form-item label="品牌故事">
                            <el-input v-model="brand.brandStory" placeholder="请输入品牌故事"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="首字母">
                            <el-input v-model="brand.firstLetter" placeholder="请输入首字母"></el-input>
                        </el-form-item>
                    </el-col>
                     
                </el-row>
                 <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="显示状态">
                            <el-switch v-model="brand.showStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否为品牌制造商" label-width="130px">
                            <el-switch v-model="brand.factoryStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="品牌排序">
                            <el-input v-model="brand.sort" placeholder="请输入品牌排序"></el-input>
                        </el-form-item>
                    </el-col>
                   
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="品牌图片">
                            <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="brand.bigPic " :src="brand.bigPic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div class="el-upload__tip" v-if="!brand.bigPic">只能上传jpg/png/gif文件，且不超过1.5M</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="品牌logo">
                            <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload">
                                <img v-if="brand.logo " :src="brand.logo" class="avatar logo">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24" style="text-align:center">
                         <el-button type="primary" @click="submitBrand">提交</el-button>
                    </el-col>
                </el-row>
            </el-form>

        </div>
    </el-card>

</div>
</template>

<script>
import {
    getToken
} from '@/utils/myAuth';
import {
    updateBrand,
    addBrand
} from '@/api/product/brand/index'
export default {
    name: 'EditBrand',
    components: {

    },
    data() {
        return {
            brand: {
                bigPic: '',
                logo: '',
            }
        };
    },
    computed: {
        headers() {
            return {
                token: getToken()
            }
        },
       

    },
    created() {
        if (this.$route.query.brand) {
            this.brand = this.$route.query.brand
            console.log(this.brand);

        }

    },
    mounted() {

    },
    methods: {

        handleAvatarSuccess(res, file) {
            if (res.success) {
                this.brand.bigPic = res.data.fileUrl
            }
        },
        handleAvatarSuccess1(res, file) {
            if (res.success) {
                this.brand.logo = res.data.fileUrl
            }
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
          guid() {
            function randomNumber() {
                return Math.floor(Math.random() * 1000 + 10)
            }
            return randomNumber()
        },
        submitBrand() {
            console.log(this.brand);
           
            if (this.brand.id) {
                updateBrand(this.brand).then(res => {
                    if (res.success) {
                        this.$message.success('提交成功了')
                        this.$router.push({
                            name: 'productListBrand'
                        })
                    } else {
                        this.$message.error('sorry!!!提交失败')
                    }
                })

            } else {
                addBrand(this.brand).then(res => {
                    if (res.success) {
                        this.$message.success('提交成功了')
                        this.$router.push({
                            name: 'productListBrand'
                        })

                    } else {
                        this.$message.error('sorry!!!提交失败')
                    }
                })

            }
        }

    },
};
</script>

<style lang="scss" scoped>
.edit {
    margin: 30px;

    .header {
        font-weight: bolder;
        color: rgb(209, 50, 50);
        font-size: 22px;
    }

    .avatar-uploader {
        width: 120px;
        height: 120px;
        border: 1px solid #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }

        .avatar {
            width: 120px;
            height: 120px;
            display: block;
            border-radius: 10px;

        }

        .avatar.logo {
            width: 80px;
            height: 80px;
            display: block;
            border-radius: 10px;

        }
    }
}
</style>
